<template>
	<loading-wait v-if="loading" ></loading-wait>
	<view class="uni-global-box" >
		<view class="uni-global-title">
			系统设置 / 地区管理 / 新增地区
		</view>
		<view class="body">
			<u-form :model="form" ref="form1" class="u-form" label-width="0" >
				<view class="u-form-textInput">
					<view class="u-form-name">
						地区名称
					</view>
					<u-form-item prop="title" :border-bottom="false">
						<u-input class="u-form-input" @blur="blurTitle($event)" v-model="form.title" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						拼音数据
					</view>
					<u-form-item prop="en" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.en" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						首字母
					</view>
					<u-form-item prop="first" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.first" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						排序
					</view>
					<u-form-item prop="sort" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.sort" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						地区坐标
					</view>
					<u-form-item prop="tags" :border-bottom="false"  style="" >
						<u-input class="u-form-input" :disabled="true" type="select" @click="goUrl('/pages/system/map')" 
							v-model="coordinate" style="margin:0;" 
							placeholder="请选择地区坐标"
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						是否显示
					</view>
					<u-form-item prop="sort" :border-bottom="false">
						<u-form-item label="" prop="radio"  :border-bottom="false">
							<u-radio-group v-model="form.is_show"  >
								<u-radio v-for="(item, index) in radioList1" :key="index" :name="item.value"
									:disabled="item.disabled">
									{{ item.name }}
								</u-radio>
							</u-radio-group>
						</u-form-item>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					
					<u-form-item prop="sort" :border-bottom="false">
						<view class="u-form-name">
							子区域列表
						</view>
						<view class="table_children">
							<view class="table_children_item" v-for="(item,i) in form.children" :key="i" >
								<view class="boder_solid"></view>
								<view class="children_item">
									
									<view class="children_item_box">
										<view class="u-form-textInput">
											<u-form-item prop="en" :border-bottom="false">
												<view class="u-form-name">
													地区名称  &nbsp;
												</view>
												<u-input class="u-form-input" v-model="item.title"  @blur="blurTitle($event,i)"  style="margin:0" />
											</u-form-item>
										</view>
									</view>
									<view class="children_item_box">
										<view class="u-form-textInput">
											<u-form-item prop="en" :border-bottom="false">
												<view class="u-form-name">
													拼音数据  &nbsp;
												</view>
												<u-input class="u-form-input" v-model="item.en" style="margin:0" />
											</u-form-item>
										</view>
									</view>
									
									<view class="children_item_box">
										<view class="u-form-textInput">
											<u-form-item prop="en" :border-bottom="false">
												<view class="u-form-name">
													首位字母  &nbsp;
												</view>
												<u-input class="u-form-input" v-model="item.first" style="margin:0" />
											</u-form-item>
										</view>
									</view>
									<view class="children_item_box">
										<view class="u-form-textInput">
											<u-form-item prop="en" :border-bottom="false">
												<view class="u-form-name">
													区域排序  &nbsp;
												</view>
												<u-input class="u-form-input" v-model="item.sort" style="margin:0" />
											</u-form-item>
										</view>
									</view>
									<view class="children_item_box">
										<view class="u-form-textInput">
											<u-form-item prop="en" :border-bottom="false">
												<view class="u-form-name">
													区域坐标  &nbsp;
												</view>
												<u-input class="u-form-input" :disabled="true" type="select" @click="goUrl('/pages/system/map?index='+i)"
													v-model="temp_location[i]" style="margin:0;" 
													placeholder="请选择地区坐标"
												/>
											</u-form-item>
										</view>
									</view>
									<u-button @click="addData" type="error" >
										<text class="iconfont icon-lajitong"></text>
										删除这条
									</u-button>
									
									
								</view>
							</view>
							<u-button @click="addData" type="info" >
								<text class="iconfont icon-shuliang-zengjia"></text>
								新增一条
							</u-button>
						</view>
						
						
					</u-form-item>
				</view>
				
				<u-button @click="submit" type="primary" >提交</u-button>
			</u-form>
		</view>
		
	</view>
	<u-toast ref="uToast" ></u-toast>
</template>

<script>
	import PinyinUtils from '/common/util/pinyin.js' ;
	import {rules,radioList1} from "/common/js_file/city.js" ;
	const global = uniCloud.importObject("global",{customUI:true});
	export default {
		data() {
			let form = {
				"title":'',
				"en":'',
				"first": '',
				"sort":'',
				"is_show":true,
				"location":'',
			}
			return {
				loading:false,
				form,
				rules,
				radioList1,
				uid:'',
				coordinate:'',
				temp_location:[],
			};
		},
		onLoad(val) {
			if(val.uid){
				this.uid = val.uid ;
				this.getData() ;
			}else{
				this.$refs.uToast.show({
					title: '环境异常',type: 'error',duration:500,
					position:'top',url: '/pages/system/city/city'
				})
			}
			// 接收地图返回数据
			uni.$on("address-select",  (res,event)=>{
				this.getAddressData(res,event)
			})
		},
		methods: {
			submit() {
				this.$refs.form1.validate(valid => {
					if (valid) {
						// this.loading = true;
						this.update( this.form );
					} else {
						
					}
				});
			},
			update(form){
				form.sort = parseInt(form.sort);
				delete form._id ;
				// return console.log(form);
				global.updateData('city',form,{_id:this.uid}).then(res =>  {
					this.loading = false;
					this.$refs.uToast.show({
						title: '修改成功',type: 'success',duration:500,
						position:'top',url: '/pages/system/city/city'
					})
				})
				
			},
			// 获取默认修改数据
			getData(){
				this.loading = true;
				let field = "_id,title,en,first,sort,is_show,location,children";
				global.getOne('city',{_id:this.uid},field).then(res => {
					console.log(res)
					let data = res.data;
					this.form = data;
					this.coordinate = data.location?data.location.coordinates?data.location.coordinates.join(','):'':'';
					this.loading = false;
					const temp_isChildren = !data.children?[]:data.children.length
					if( temp_isChildren != 0 ){
						this.temp_location = data.children.map(item => {
							return item.location?item.location.coordinates?item.location.coordinates.join(','):'':''
						})
					}
				})
			},
			// title失去焦点
			blurTitle(ev,index=null){
				if(!ev) return ;
				
				if(index != null){
					// 获取拼音
					this.form.children[index].en = PinyinUtils.chineseToPinYin(ev);
					// 获取首字母
					this.form.children[index].first = PinyinUtils.chineseToPinYinFirst(ev).substring(0,1);
				}else{
					// 获取拼音
					this.form.en = PinyinUtils.chineseToPinYin(ev);
					// 获取首字母
					this.form.first = PinyinUtils.chineseToPinYinFirst(ev).substring(0,1);
				}
				
			},
			addData(){
				this.form.children.push({})
			},
			// 接收坐标
			getAddressData(res,val){
				console.log(res,val)
				const index = val.index ? parseInt(val.index) : null;
				if(index != null){
					this.form.children[index].location = res.location;
					this.temp_location[index]  = res.location.coordinates.join(',')
				}else{
					console.log(index);
					this.form.location = res.location;
					this.coordinate = res.location.coordinates.join(',');
				}
			},
			
			goUrl(Url){
				uni.navigateTo({url:Url})
			}
		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.table_children{
		width:85%;
		border-left: 1px solid #eee;
		border-radius:20px;
		padding:10px 0px;
		
	}
	.table_children_item{
		display: flex;
		align-items: center;
		.boder_solid{
			width:30px;
			border-top:1px solid #ccc;
		}
		.children_item{
			flex:1;
			margin:5px 0;
			border-radius:5px;
			border: 1px solid #ccc;
			.children_item_box{
				display: flex;
				column-gap: 20px;
				padding:0 5px;
				align-items: center;
				.label{
					text-align: right;
					width:70px;
				}
			}
		}
	}
	.body{
		width: 50%;
	}
</style>
